<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fonts</title> 
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Poppins:wght@300&display=swap');
        h1 {
            font-family: 'Poppins', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
        }

        p {
            /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
            font-family: 'Baloo Bhai 2', sans-serif;
            font-size: 20px; 
            /* font-style:italic;
            font-weight: 500;  */
            
        }
        h2{
            text-align: center;
            text-transform: uppercase;
            text-decoration: underline;
            text-decoration-color: blue;
            /* text-decoration-style: dotted; */
            text-decoration-thickness: 7px ;
            /* text-indent: 45px; */
        }
        .lorem{
            border: 2px solid red;
            width: 145px;
            word-break: break-all;
            /* text-overflow: ellipsis;
            overflow: hidden; */

        }
    </style>
</head>

<body>
    <div>
        <!-- https://codepen.io/web-dot-dev/pen/yLojraG -->
        <h1>Fonts</h1>
        <h2>about Fonts</h2>
        <p>This is a video on fonts</p>
        <p class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos sequi accusamus quas itaque molestias dolorem quisquam quod, adipisci maxime dolore, mollitia illo officia deserunt voluptatem iure qui. Fugit aliquam possimus aperiam commodi eum amet veniam at vel. Necessitatibus asperiores eos amet laborum dolor, ipsum porro!</p>
    </div>
</body>

</html>